<template>
  <div class="device-settings">
    <!-- 搜索表单 -->
    <div class="search-area">
      <el-form :model="searchForm" class="search-form" inline>
        <el-row>
          <el-col :span="6">
            <el-form-item label="设备名称">
              <el-input v-model="searchForm.deviceName" placeholder="请输入设备名称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="设备编号">
              <el-input v-model="searchForm.deviceCode" placeholder="请输入设备编号" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="设备状态">
              <el-select v-model="searchForm.deviceStatus" placeholder="请选择设备状态" clearable style="width: 200px" @change="handlePageData">
                <el-option label="在线" value="在线" />
                <el-option label="离线" value="离线" />
                <el-option label="未激活" value="未激活" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="handlePageData">搜索</el-button>
            <el-button @click="resetForm">重置</el-button>
            <el-button type="success" @click="addDevice">新增设备</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 卡片区域 -->
    <el-row :gutter="20" class="device-card-container">
      <el-col :span="8" v-for="device in list" :key="device.id">
        <el-card shadow="hover" class="device-card">
          <div class="device-card-content">
            <!-- 左侧文字信息 -->
            <div class="device-info">
              <div class="device-title">
                <span>{{ device.name }}</span>
                <span class="version">Ver {{ device.version }}</span>
              </div>
              <el-tag
                  :type="device.status === '在线' ? 'success' : device.status === '离线' ? 'info' : 'warning'"
                  class="status-tag"
              >
                {{ device.status }}
              </el-tag>
              <p>编号：{{ device.code }}</p>
              <p>产品：{{ device.product }}</p>
              <p>激活时间：{{ device.activationTime || '未激活' }}</p>
            </div>

            <!-- 右侧设备图片 -->
            <div class="device-image-container">
              <img :src="device.image" alt="设备图片" class="device-image" />
            </div>
          </div>

          <!-- 操作按钮 -->
          <div class="card-actions">
            <el-button type="danger" @click="deleteDevice(device.id)">删除</el-button>
            <el-button type="primary" @click="editDevice(device)">编辑</el-button>
            <el-button type="success" @click="viewDeviceStatus(device)">运行状态</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 分页组件 -->
    <div>
      <vxe-pager
          v-model:currentPage="pageVO.currentPage"
          v-model:pageSize="pageVO.pageSize"
          :total="pageVO.total"
          :layouts="['Home', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'End', 'Sizes', 'FullJump', 'Total']"
          @page-change="pageChange"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'

// 图片导入
import cameraImage from '@/assets/img/摄像头.png'
import monitoringImage from '@/assets/img/监测站.png'

interface Device {
  id: number
  name: string
  version: string
  status: string
  code: string
  product: string
  activationTime?: string
  image: string
}

export default defineComponent({
  name: 'DeviceSettings',
  setup() {
    const searchForm = reactive({
      deviceName: '',
      deviceCode: '',
      deviceStatus: '' // 默认值为空，表示所有状态
    })

    const AllList = ref<Device[]>([
      {
        id: 1,
        name: '农场摄像头',
        version: '1',
        status: '在线',
        code: '3209020000111000003',
        product: '监控设备',
        activationTime: '2024-07-24',
        image: cameraImage // 使用导入的图片路径
      },
      {
        id: 2,
        name: '土壤墒情监测站',
        version: '1',
        status: '离线',
        code: 'D12D7G548344',
        product: '土壤墒情监测站',
        activationTime: '2024-09-01',
        image: monitoringImage // 使用导入的图片路径
      },
      {
        id: 3,
        name: '农场摄像头',
        version: '1',
        status: '未激活',
        code: '3209020000111000004',
        product: '监控设备',
        activationTime: '2024-07-24',
        image: cameraImage // 使用导入的图片路径
      },
    ])

    const pageVO = reactive({
      total: AllList.value.length,
      currentPage: 1,
      pageSize: 10
    })

    const list = ref<Device[]>([])

    const handlePageData = () => {
      const { pageSize, currentPage } = pageVO
      const filteredData = handleSearch()
      pageVO.total = filteredData.length
      list.value = filteredData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
    }

    const handleSearch = () => {
      return AllList.value.filter(device => {
        const nameMatch = device.name.includes(searchForm.deviceName)
        const codeMatch = device.code.includes(searchForm.deviceCode)
        const statusMatch = searchForm.deviceStatus ? device.status === searchForm.deviceStatus : true
        return nameMatch && codeMatch && statusMatch
      })
    }

    const pageChange = (params: { currentPage: number; pageSize: number }) => {
      pageVO.currentPage = params.currentPage
      pageVO.pageSize = params.pageSize
      handlePageData()
    }

    const resetForm = () => {
      searchForm.deviceName = ''
      searchForm.deviceCode = ''
      searchForm.deviceStatus = ''
      handlePageData()
    }

    const addDevice = () => {
      console.log('新增设备')
    }

    const deleteDevice = (id: number) => {
      console.log('删除设备：', id)
    }

    const editDevice = (device: Device) => {
      console.log('编辑设备：', device)
    }

    const viewDeviceStatus = (device: Device) => {
      console.log('查看设备运行状态：', device)
    }

    handlePageData()

    return {
      searchForm,
      AllList,
      list,
      pageVO,
      handlePageData,
      pageChange,
      resetForm,
      addDevice,
      deleteDevice,
      editDevice,
      viewDeviceStatus
    }
  }
})
</script>

<style scoped>
.device-settings {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.search-area {
  height: 70px;
  padding: 20px;
  border-bottom: 1px solid;
  border-color: var(--border-color);
}

.search-form {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
  align-content: space-around;
  justify-content: flex-start;
}

.device-card-container {
  flex: 1;
  margin: 10px 0;
  padding-left: 10px;
}

.device-card {
  display: flex;
  flex-direction: column;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 8px;
}

.device-card-content {
  display: flex;
  justify-content: space-between;
}

.device-info {
  flex: 1;
}

.device-title {
  font-size: 16px;
  font-weight: bold;
}

.version {
  font-size: 12px;
}

.device-image-container {
  flex-shrink: 0;
}

.device-image {
  width: 120px;
  height: 120px;
  object-fit: contain;
  border-radius: 8px;
}

.card-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
</style>
